/<template>
  <div>
      <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
      </div>
      <div class="grid">
            <van-grid :column-num="4">
                <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
            </van-grid>
      </div>
      <div class="miaosha">
          <div class="child">
                <van-grid :column-num="8">
                    <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
                </van-grid>
          </div>
      </div>
      <div class="list">
          <div v-for="item,i in $store.state.list" :key="i" class="box" @click="$router.push(`/detail/${item.id}`)">
              <img :src='item.img' alt="">
              <p>{{item.title}}</p>
              <p>￥{{item.price}}</p>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Grid, GridItem } from 'vant';
import axios from "axios"
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data(){
        return {
            list:[],
        }
    },
    mounted() {
        axios.get("/list").then(res=>{
            this.$store.commit('setList',res.data )
        })
    },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
html,body,#app{
    width: 100%;
    height: 100%;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.van-grid-item{
    height: 70px;
}
.list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.box{
    width: 150px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column;
}
</style>